<template>
  <div class="container">
    <div class="title_bar">
      <div class="main_title">中国地图</div>
      <slot name="title"></slot>
    </div>
    <div id="map_basic" style="width: 100%"></div>
  </div>
</template>

<script>
import { Chart } from "@antv/g2";
import { DataView } from "@antv/data-set";
export default {
  data() {
    return {
      chart: null,
      dataList: [],
    };
  },
  mounted() {
    this.chart = new Chart({
      // 指定图表容器 ID
      container: "map_basic",
      // 自适应宽度，容器伸缩会重新渲染图表
      autoFit: true,
      // 容器的高度
      height: 500,
      // 图表的外侧内边距
      padding: [40, 80, 80, 80],
    });
    fetch("https://gw.alipayobjects.com/os/antvdemo/assets/data/china-provinces.geo.json")
      .then((res) => res.json())
      .then((mapData) => {
        // 将 GeoJSON 数据转换成 G2 可绘制的的数据格式
        const dv = new DataView().source(mapData, {
          type: "GeoJSON",
        });
        this.chart.data(dv.rows);
        // 不展示坐标系
        this.chart.axis(false);
        // 不展示提示框
        this.chart.tooltip(false);
        // 映射图形，自定义图形填充样式
        this.chart
          .polygon()
          .position("longitude*latitude")
          .style({
            fill: '#DDDDDD',
            stroke: '#b1b1b1',
            lineWidth: 1,
            fillOpacity: 0.85
          });

        this.chart.render()
      });
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .title_bar {
    width: 100%;
    margin-bottom: 20px;
    .main_title {
      width: 100%;
      text-align: center;
      font-size: 40px;
      color: #333333;
    }
    .sub_title {
      width: 100%;
      text-align: center;
      font-size: 28px;
      margin-top: 18px;
      color: #999999;
    }
  }
}
</style>
